<template>
	<view class="mainpadding" v-if="pageShow" style="padding-bottom: 150rpx;">
		<view class="flexleft margin_top xiahuaxian">
			<image :src="cdbInfo.shop.logoimage_text" class="margin_right3 radius" style="width: 100rpx;height: 100rpx;min-width: 100rpx;" mode=""></image>
			<view class="titletext xiaohei ">{{cdbInfo.shop.name}}</view>
		</view>
		<view class="margin_top xiaohei bold titletext">桌位資訊</view>
		<view class="flexleft margin_top5">
			<u-icon name="grid-fill" color="#999" size="24"></u-icon>
			<view class="xiaohei main_size margin_left2">{{cdbInfo.ordergoods.desk}}桌號</view>
		</view>
		<view class="flexleft margin_top">
			<u-icon name="clock" color="#999" size="24"></u-icon>
			<view class="xiaohei main_size margin_left2">入座時間:{{cdbInfo.shoptable.rztime_text}}</view>
		</view>
		<view class="flexleft margin_top xiahuaxian">
			<u-icon name="man-add-fill" color="#999" size="24"></u-icon>
			<view class="xiaohei main_size margin_left2">
				<text v-for="(item,index) in cdbInfo.ordergoods.cdbjhsf_data" :key="index">
					<text v-if="item.num" class="margin_right1"><text class="huang_text">{{item.num}}</text>/{{item.name}}</text>
				</text>
			</view>
		</view>
		<view class="flexbetween margin_top">
			<view class=" xiaohei bold titletext">桌位資訊</view>
			<view class=" xiaohuang bold titletext">合計：${{cdbInfo.ordergoods.countmoney}}</view>
		</view>
		
		<view class=" ffffff radius">
			<view class="xiaobai mainpadding2s margin_top radius" style="font-size: 32rpx;background-color: #FF5C00;">待送出({{dscarr.length}})</view>
			<view class="mainpadding2" v-if="dscarr.length">
				<view class="margin_top xiahuaxianqu" v-for="item in dscarr" :key="item.id">
					<view class="flexbetween">
						<view class="hei_text titletext xiankuan" style="width: 500rpx;">{{item.goods.name}}</view>
						<view class="xiaohuang" v-show="item.status==1">待送出</view>
						<view class="lv_text" style="color: #00A6EA;" v-show="item.status==2">製作中</view>
						<view class="lv_text" v-show="item.status==3">已出餐</view>
					</view> 
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<view class="xiaohui main_size">{{item.goods_spunat_name}}</view>
							<text class="stateBox text_e color1">限點:{{item.goods.xd_num==-1?'不限':item.goods.xd_num}}</text>
						</view>
						<view class="xiaohei main_size">${{item.price}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<u-icon name="trash" color="#ff0000" v-if="item.status==1" size="24" @click="delcar(item)"></u-icon>
						<u-number-box button-size="36" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff" asyncChange  v-if="item.status==1" @change="changenum($event,item)"
							v-model="item.num"></u-number-box>
						<view class="" v-if="item.status!=1"></view>
						<view class="xiaohei main_size" v-if="item.status!=1">*{{item.num}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="ffffff radius">
				<view class="flexbetween mainpadding2s margin_top radius" style="background-color: #00A6EA;" @click="zzzshow=!zzzshow">
				<view class="" style="font-size: 32rpx;color: #fff;">製作中({{zzzarr.length}})</view>
				<u-icon name="arrow-up" color="#fff" size="16" v-if="zzzshow==true && zzzarr.length"></u-icon>
				<u-icon name="arrow-down" color="#fff" size="16" v-if="zzzshow==false && zzzarr.length"></u-icon>
			</view>
			<view class="mainpadding2"  v-if="zzzshow==true">
				<view class="margin_top xiahuaxianqu" v-for="item in zzzarr" :key="item.id">
					<view class="flexbetween">
						<view class="hei_text titletext xiankuan" style="width: 500rpx;">{{item.goods.name}}</view>
						<view class="xiaohuang" v-show="item.status==1">待送出</view>
						<view class="lv_text" style="color: #00A6EA;" v-show="item.status==2">製作中</view>
						<view class="lv_text" v-show="item.status==3">已出餐</view>
					</view> 
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<view class="xiaohui main_size">{{item.goods_spunat_name}}</view>
							<text class="stateBox text_e color1">限點:{{item.goods.xd_num==-1?'不限':item.goods.xd_num}}</text>
						</view>
						<view class="flexright">
							<view class="xiaohei main_size" v-if="item.status!=1">*{{item.num}}</view>
							<view class="xiaohei main_size">${{item.price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class=" ffffff radius">
			<view class="flexbetween mainpadding2s margin_top radius" style="background-color: #37a621;" @click="yccshow=!yccshow">
				<view class="xiaobai" style="font-size: 32rpx;">已出餐({{yccarr.length}})</view>
				<u-icon name="arrow-up" color="#fff" size="16" v-if="yccshow==true && yccarr.length"></u-icon>
				<u-icon name="arrow-down" color="#fff" size="16" v-if="yccshow==false && yccarr.length"></u-icon>
			</view>
			<view class="mainpadding2"  v-if="yccshow==true">
				<view class="xiahuaxianqu margin_top" v-for="item in yccarr" :key="item.id">
					<view class="flexbetween">
						<view class="hei_text titletext xiankuan" style="width: 500rpx;">{{item.goods.name}}</view>
						<view class="xiaohuang" v-show="item.status==1">待送出</view>
						<view class="lv_text" style="color: #00A6EA;" v-show="item.status==2">製作中</view>
						<view class="lv_text" v-show="item.status==3">已出餐</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<view class="xiaohui main_size">{{item.goods_spunat_name}}</view>
							<text class="stateBox text_e color1">限點:{{item.goods.xd_num==-1?'不限':item.goods.xd_num}}</text>
						</view>
						<view class="flexright">
							<view class="xiaohei main_size margin_right1" v-if="item.status!=1">*{{item.num}}</view>
							<view class="xiaohei main_size">${{item.price}}</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="posibottom flexbetween ffffff mainpadding">
			<view class="submitbtn" style="width: 45%;background-color: #dee5eb;" @click="backpage">繼續點餐</view>
			<view class="submitbtn" style="width: 45%;" @click="submit()">送出餐品</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				cdbtc_id:"",
				shop_id:"",
				carlistAll:[],
				cdbInfo:{},
				pageShow:false,
				dscarr:[],
				dscshow:false,
				zzzarr:[],
				zzzshow:false,
				yccarr:[],
				yccshow:false,
			}
		},
		onLoad(options) {
			this.cdbtc_id = options.cdbtc_id
			this.shop_id = options.shop_id
		},
		onShow() {
			this.getcarList()
			this.getcdbInfo()
		},
		computed:{
			carallprice(){
				let price = 0
				this.carlistAll.forEach(item=>{
					price = Number(item.price)*item.num+Number(price)
				})
				return price 
			}
		},
		methods: {
			submit(){
				httpRequest.request('/api/cdb/addOrderGoodsList', 'GET', {
					order_make_id:uni.getStorageSync("order_make_id"),
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.getcarList()
					}
				})
			},
			backpage(){
				uni.navigateBack(1)
			},
			changenum(e, item) {
				console.log(e);
				let number = e.value
				uni.showLoading({
					mask:true,
					title:"請稍后"
				})
				httpRequest.request('/api/cdb/clCdbCart', 'GET', {
					id: item.id,
					goods_id:item.goods_id,
					num: number,
					order_make_id:uni.getStorageSync("order_make_id"),
					shop_id: this.shop_id,
				}, false, false, true).then(res => {
					uni.hideLoading()
					if(res.code==1){
						item.num = number
					}
					if (res.code != 1) {
						httpRequest.toast(res.msg)
					}
				})
			},
			delcar(item){
				httpRequest.request('/api/cdb/delCdbCart', 'GET', {
					id: item.id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getcarList()
					}
				})
			},
			getcarList(){
				this.http.request('/api/cdb/cdbcartIndex', 'GET', {
					shop_id: this.shop_id,
					order_make_id:uni.getStorageSync("order_make_id"),
				}).then(res => {
					let dscarr = []
					let zzzarr = []
					let yccarr = []
					res.data.forEach(item=>{
						if(item.status==1){
							dscarr.push(item)
						}
						if(item.status==2){
							zzzarr.push(item)
						}
						if(item.status==3){
							yccarr.push(item)
						}
					})
					this.dscarr = dscarr
					this.zzzarr = zzzarr
					this.yccarr = yccarr
					this.carlistAll = res.data
				})
			},
			getcdbInfo(){
				this.http.request('/api/cdb/getShoptable', 'GET', {
					order_make_id:uni.getStorageSync("order_make_id"),
				}).then(res => {
					this.cdbInfo = res.data
					this.pageShow = true
				})
			},
		}
	}
</script>

<style>
	.mainpadding2s{
		padding: 20rpx 30rpx;
	}
	.stateBox {
			padding: 10rpx 30rpx;
			text-align: center;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			font-size: 24rpx;
		}
		.color1 {
				color: #FF8505;
				background: rgba(255, 133, 5, 0.1);
			}
	.reducebtn {
		height: 40rpx !important;
		width: 40rpx !important;
		background-color: #ff8202 !important;
		font-size: 40rpx !important;
		color: #fff;
	}
	
	.plusbtn {
		height: 40rpx !important;
		width: 40rpx !important;
		background-color: #ff8202 !important;
		font-size: 40rpx !important;
		color: #fff;
	}
.xiahuaxian{
	padding-bottom: 60rpx;
	border-bottom: 1rpx solid rgba(0, 0, 0, .1);
}
.xiahuaxianqu{
	padding-bottom: 30rpx;
	border-bottom: 1rpx dashed #333;
}
</style>
